<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>按钮的水波纹效果</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="UTF-8">
			mui.init();
		</script>
		<style type="text/css">
			.touch-bg,
			.touch-bg-js {
				position: absolute;
				width: 2px;
				height: 2px;
				margin: 0;
				border-radius: 50%;
				background-color: #C0C0C0;
				opacity: 0.3;
				display: none;
			}
			
			.touch-bg-js {
				display: block;
				transition: all 0.05s;
				-webkit-transition: all 0.05s;
			}
			
			button {
				overflow: hidden;
			}
			
			button:active {
				background: #FFFFFF !important;
			}
			
			.touch-bg-active {
				transition: all 2s;
				-webkit-transition: all 2s;
				width: 120vw;
				height: 120vw;
				margin-left: -60vw;
				margin-top: -60vw;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">模拟安卓按钮单击背景以圆形展开的动画效果</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
	                    Item 1
	                </a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
	                     Item 2
	                </a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
	                     Item 3
	                </a>
					</li>
				</ul>
			</div>
			<button type="button" class="mui-btn mui-btn-block mui-btn-nav">按钮
			</button>

			<button type="button" class="mui-btn" style="width: 150px;margin-left: 100px;">按钮
			</button>
		</div>
		<script type="text/javascript">
			var touch_bg_phillyx = (function(win) {
				//var sty = document.createElement('style');
				//sty.innerText = ".touch-bg,{position: absolute;width: 2px;height: 2px;margin: 0;border-radius: 50%;background-color: #C0C0C0;opacity: 0.3;display: none;}.touch-bg-active {transition: all 2s;-webkit-transition: all 2s;width: 120vw;height: 120vw;margin-left: -60vw;margin-top: -60vw;}";
				//document.head.appendChild(sty);
				var tick, startX, startY;

				function touchStart(e) {
					var touch = e.touches[0]; //获取第一个触点
					//记录触点初始位置
					var x = startX = touch.pageX; //页面触点X坐标
					var y = startY = touch.pageY; //页面触点Y坐标
					var _this = this;
					_this.style.position = 'relative';
					_this.style.overflow = 'hidden';
					var touch_bg = document.createElement('div');
					touch_bg.className = 'touch-bg';
					touch_bg.style.top = Math.abs(this.offsetTop - y) + 'px';
					touch_bg.style.left = Math.abs(this.offsetLeft - x) + 'px';
					touch_bg.style.display = 'block';
					_this.appendChild(touch_bg);
					tick = +new Date();
					setTimeout(function() {
						touch_bg.classList.add('touch-bg-active');
						var radius = getRadius.call(_this);
						setStyle.call(touch_bg, radius);
					});
				};

				function getRadius() {
					/* 默认值
					 * 盒子宽度一半+触点相对位移+5px的边角拓展
					 **/
					var half = this.offsetWidth / 2;
					var radius = half + Math.abs(half - startX) + 5;
					if (radius < half) {
						//最小值
						radius = half;
					}
					return radius;
				}

				function setStyle(r) {
					this.style.width = this.style.height = r * 2 + "px";
					this.style.marginLeft = this.style.marginTop = -r + "px";
				}

				function touchEnd(e) {
					var _this = this;
					var touch_bg = this.querySelector('.touch-bg');
					tick = +new Date() - tick;
					var w = _this.offsetWidth;
					console.log("w",w);
					var radius = getRadius.call(_this);
					if (radius * 2 - w > 0) {
						var t = 100 - w / (2 * radius) * 100;
						console.log("t", t);
						if (t < 30) {
							t = 600;
						} else if (t < 50) {
							t = 400;
						} else {
							t = t * 4;
						}
						console.log("t-new",t);
						touch_bg.style.transitionDuration = t + 'ms';
						touch_bg.style.webkitAnimationDuration = t + 'ms';
						touch_bg.style.width = touch_bg.style.height = radius * 2.02 + "px";
						touch_bg.style.marginLeft = touch_bg.style.marginTop = -radius*1.01 + "px";
						console.log("",touch_bg);
						setTimeout(function() {
							_this.removeChild(touch_bg);
						}, t)
					} else {
						_this.removeChild(touch_bg);
					}
				};
				return {
					init: function(obj) {
						obj.addEventListener('touchstart', touchStart)
						obj.addEventListener('touchend', touchEnd);
					}
				}
			}(window));
			mui('.mui-table-view .mui-table-view-cell').each(function(index, item) {
				touch_bg_phillyx.init(this);
			});
			mui('button').each(function(index, item) {
				touch_bg_phillyx.init(this);
			});
		</script>
	</body>

</html>
